
@extends("layouts.master")

@section("body")
<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
        <div class="info-box red-bg">
            <i class="fa fa-gear"></i>
            <div id="today" class="count">0</div>
            <div class="title">本日</div>                  
        </div><!--/.info-box-->         
    </div><!--/.col-->
    
    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
        <div class="info-box green-bg">
            <i class="fa fa-cogs"></i>
            <div id="this_week" class="count">0</div>
            <div class="title">本周</div>                      
        </div><!--/.info-box-->         
    </div><!--/.col-->
    
    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
        <div class="info-box blue-bg">
            <i class="fa fa-moon-o"></i>
            <div id="this_month" class="count">0</div>
            <div class="title">本月</div>                       
        </div><!--/.info-box-->         
    </div><!--/.col-->
    
    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
        <div class="info-box magenta-bg">
            <i class="fa fa-gamepad"></i>
            <div id="this_year" class="count">0</div>
            <div class="title">本年</div>                      
        </div><!--/.info-box-->         
    </div><!--/.col-->      
    
</div>
<script type="text/javascript" src="/lib/js/echarts.min.js"></script>
<div class="col-sm-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h2><i class="fa fa-bar-chart-o red"></i><strong>天数垃圾袋使用记录</strong></h2>
            <div class="panel-actions">
                <a href="charts-xcharts.html#" class="btn-close"><i class="fa fa-times"></i></a>
            </div>
        </div>
        <div class="panel-body">
            <div id="day" style="height: 300px;"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
     var day = echarts.init(document.getElementById('day'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ""
            },
            tooltip: {},
            legend: {
                data: ['使用数量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [
                {
                    name: '使用数量',
                    type: 'bar'
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        day.setOption(option);
</script>
<div class="col-sm-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h2><i class="fa fa-bar-chart-o red"></i><strong>周数垃圾袋使用记录</strong></h2>
            <div class="panel-actions">
                <a href="charts-xcharts.html#" class="btn-close"><i class="fa fa-times"></i></a>
            </div>
        </div>
        <div class="panel-body">
            <div id="week" style="height: 300px;"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
     var week = echarts.init(document.getElementById('week'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ""
            },
            tooltip: {},
            legend: {
                data: ['使用数量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [
                {
                    name: '使用数量',
                    type: 'bar'
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        week.setOption(option);
</script>
<div class="col-sm-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h2><i class="fa fa-bar-chart-o red"></i><strong>月数垃圾袋使用记录</strong></h2>
            <div class="panel-actions">
                <a href="charts-xcharts.html#" class="btn-close"><i class="fa fa-times"></i></a>
            </div>
        </div>
        <div class="panel-body">
            <div id="month" style="height: 300px;"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
     var month = echarts.init(document.getElementById('month'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ""
            },
            tooltip: {},
            legend: {
                data: ['使用数量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [
                {
                    name: '使用数量',
                    type: 'bar'
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        month.setOption(option);
</script>
<div class="col-sm-12">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h2><i class="fa fa-bar-chart-o red"></i><strong>年数垃圾袋使用记录</strong></h2>
            <div class="panel-actions">
                <a href="charts-xcharts.html#" class="btn-close"><i class="fa fa-times"></i></a>
            </div>
        </div>
        <div class="panel-body">
            <div id="year" style="height: 300px;"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
     var year = echarts.init(document.getElementById('year'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ""
            },
            tooltip: {},
            legend: {
                data: ['使用数量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [
                {
                    name: '使用数量',
                    type: 'bar'
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        year.setOption(option);
</script>
@stop

@section('js')
    
    
    <script type="text/javascript" src="/js/js/pages/desktop/index.js"></script>

@stop

